<form class="form-horizontal" onsubmit="return false;">
    <fieldset>
        <legend>{{ _('CORS') }}</legend>
        <div class="control-group">
            <div class="controls">
                <label class="checkbox">
                    <input type="checkbox" id="settings-apiCors" data-bind="checked: api_allowCrossOrigin"> {{ _('Allow <a href="%(url)s">Cross Origin Resource Sharing (CORS)</a>', url = "https://en.wikipedia.org/wiki/Cross-origin_resource_sharing") }} <label class="label label-info">{{ _('Needs restart') }}</label>
                </label>
            </div>
        </div>
    </fieldset>
    <fieldset>
        <legend>{{ _('Global API Key') }}</legend>
        <div class="alert">
            <p>{% trans %}
                The global API key should best not be used anymore. It's one single key that gives full admin access to
                your whole OctoPrint instance. Instead of using it you should create individual Application Keys for
                your third party clients. That way they get permissions matching the user account used for key
                creation and you can also revoke access to one app without having to change the keys for all other apps.
                It's also recommended to create a user account without admin access and use that for third
                party clients where possible.
            {% endtrans %}</p>
            <p><a href="javascript:void(0)" data-bind="click: function() { $root.selectTab('#settings_plugin_appkeys') }">{{ _('Access Application Keys') }}</a></p>
        </div>
        <div class="control-group">
            <label class="control-label" for="settings-apikey">{{ _('Global API Key') }}</label>
            <div class="controls">
                <div class="input-append input-block-level">
                    <input type="text" readonly="readonly" id="settings-apikey" data-bind="value: api_key, attr: {placeholder: '{{ _('N/A')|esq }}'}">
                    <a class="btn add-on" title="Copy API Key to clipboard" data-bind="click: copyApiKey, css: {'disabled': !api_key()}"><i class="fas fa-copy"></i></a>
                    <a class="btn add-on" title="Generate new API Key" data-bind="click: generateApiKey"><i class="fas fa-sync"></i></a>
                </div>
                <span class="help-block">{{ _('Please note that changes to the API key are applied immediately, without having to "Save" first.') }}</span>
            </div>
        </div>
        <div class="control-group" data-bind="visible: api_key">
            <label class="control-label">{{ _('QR Code') }}</label>
            <div class="controls">
                <div data-bind="qrcode: {text: api_key, size: 180}"></div>
            </div>
        </div>
    </fieldset>

</form>
